<template>
	<div class="wrapper">
		<loading v-if='loading'></loading>
		<div v-if='!loading'>
			<div id="header">
				<div class="back" v-on:click='gotomovieList()'></div>
				<h2 class="header-title">{{movieDtail.title}}</h2>
			</div>
			<div id="msg-movie">
				<div class="left"><img v-bind:src="movieDtail.images.medium"></div>
				<div class="right">
					<div class="title">{{movieDtail.title}}</div>
					<star v-bind:num="movieDtail.rating.stars"></star>
					<div class="score">{{movieDtail.rating.average}}({{movieDtail.ratings_count}}人评分)</div>
					<div class="year">{{movieDtail.year}}年</div>
					<div class="genres"><span class="item" v-for='genre in movieDtail.genres'>{{genre}}</span></div>
					<div class="countries">{{movieDtail.countries[0]}}</div>
					<div class="pubdates">{{movieDtail.pubdates[2]}}</div>
				</div>
			</div>
			<div id="view">
				<div class="viewed">{{movieDtail.wish_count}}人想看</div><div class="wish">{{movieDtail.comments_count}}人看过</div>
			</div>
			<div id="summary">
				<p>{{movieDtail.summary}}</p>
			</div>
			<div id="actores">
				<h2>演职人员</h2>
				<div class="actor_detail">
					<div class="directors" v-on:click='gotocasts(movieDtail.directors[0].id)'>
						<img v-bind:src="movieDtail.directors[0].avatars.small">
						<p>{{movieDtail.directors[0].name | limitNum(movieDtail.directors[0].name)}}</p>
					</div>
					<div class="actor-item" v-for='actor in movieDtail.casts' v-on:click='gotocasts(actor.id)'>
						<img v-bind:src="actor.avatars.small">
						<p>{{actor.name | limitNum(actor.name)}}</p>
					</div>
				</div>
			</div>
			<div id="popular_comments">
				<h2>热门短评</h2>
				<div class="comments_detail" v-for="comments in movieDtail.popular_comments">
					<div class="rating">
						<span class="stars">{{comments.rating.value}}</span>
						<span class="date">{{comments.created_at}}</span>
					</div>
					<p>{{comments.content}}</p>
					<div class="author">
						<img v-bind:src="comments.author.avatar">
						<span>{{comments.author.name}}</span>
					</div>
				</div>
			</div>
			<p class="all-comment" v-on:click='gotocomments(movieDtail.popular_comments[0].subject_id)'>查看全部短论</p>
			<p class="all-comment">查看全部影评</p>
		</div>
	</div>	
</template>

<script>
	import star from './star'
	import loading from './loading'
	export default{
		data(){

			return {
				loading:true,
				movieDtail:{
					title:''
				}
			}
		},
		components:{
		    loading:loading,
		    star:star
		},
		filters: {
		   limitNum: function (value) {
			    var val = value.slice(0,5)
			   	val = val + '...'
			    return val
		   }
		},
		mounted:function(){
			var id = this.$route.params.id;
			this.$http.jsonp("https://api.douban.com/v2/movie/subject/"+id+"?apikey=0b2bdeda43b5688921839c8ecb20399b"
			).then(function(response){
  		    		this.movieDtail=response.body
  		    		this.loading=false
			})
		},
		methods:{
		    gotomovieList:function(){
		      this.$router.replace({path:'/'})
		    },
		    gotocomments:function(id){
				this.$router.push({ path: id+'/comments' })

			},
			gotocasts:function(i){
				this.$router.push({path:'/casts/'+i})

			}
		  }
	}
</script>

<style scoped>
	.wrapper{
		background-color: #e5e9f2;
	}
	#header{
		display: flex;
	    height: 50px;
	    width: 100%;
	    background-color: #e54847;
	    padding: 6px;
	    box-sizing: border-box;
	    position: relative;
	}
	#header .back{
		position: absolute;
		top: 18px;
		left: 15px;
		height: 13px;
	    width: 13px;
	    border: 2px solid #fff;
	    border-width: 0 0 2px 2px;
	    transform: rotate(45deg);
	}
	#header h2{
		margin: auto;
		color: #fff;
    	font-size: 20px;
	}
	#msg-movie{
		color: #6b6868;
    	background-color: #b4b1b1;
    	padding: 15px;
    	display: flex;
	}
	#msg-movie .left{
		float: left;
		margin-right: 20px;
	}
	#msg-movie .left img{
		border: 1px solid #fff;
		align-items: flex-end;
	}
	#msg-movie .right .title{
		font-size: 20px;
    	color: #343232;
    	margin-bottom: 10px;
	}
	.right .score,.right .year,.right .genres,.right .countries,.right .pubdates{
		font-size: 12px;
		line-height: 20px;
	}
	#view{
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 15px 0;
	}
	#view .viewed,#view .wish{
		font-size: 14px;
	    line-height: 30px;
	    text-align: center;
	    width: 100px;
	    height: 30px;
	    color: #fff;
	    border-radius: 5px;
	    background-color: #e54847;
	    margin: 0 20px;
	}
	#summary p{
		padding: 10px;
	    font-size: 14px;
	    color: #555;
	    line-height: 24px;
	}
	#actores h2,#popular_comments h2{
		color: #666;
	    font-size: 15px;
	    line-height: 40px;
	    font-weight: 700;
	    margin-bottom: 5px;
	    margin-left: 10px;
	}
	.actor_detail{
		display: flex;
		justify-content: center;
	}
	#actores .actor-item,.directors {
		margin: 0 5px;
	}
	#actores .actor-item p,.directors p{
		font-size: 12px;
		color: #2c3e50;
	}
	#popular_comments{
		font-size: 12px;
	}
	#popular_comments .comments_detail{
		margin-bottom: 8px;
		border-bottom: 1px solid #d6d3d3;
		margin:0 10px;
		line-height: 15px;
	}
	#popular_comments .comments_detail p{
		color: #333;
	    margin-bottom: 10px;
	    margin-top: 10px;
	}
	#popular_comments img{
		border-radius: 50%;
	}
	.author{
		display: flex;
		margin-bottom: 5px;
	}
	.author span{
		margin-left: 10px;
		line-height: 48px;
		color: #999;
	}
	.all-comment{
		color: #e54847;
	    font-weight: lighter;
	    text-align: center;
	    font-size: 15px;
	    height: 30px;
	    line-height: 30px;
	    border-bottom: 1px solid #d6d3d3;
	    margin:0 10px;
	}
</style>